<template>
  <div id="page-follows" class="wrapper clearfix master">
      <div page="fans" class="clearfix col-full">
        <div class="follow-main">
          <div class="follow-content section">
            <div class="content" style="padding-bottom: 10px;">
              <ul class="relation-list">
                <li v-for="(item,index) in fansList" :key="item.id" class="list-item clearfix">
                  <div class="follow-select" style="display: none;">
                    <div class="icon icon-follow-watched"></div>
                  </div>
                  <div class="cover-container"><nuxt-link to="javascript:void(0);"
                                                  class="up-cover-components">
                    <div class="bili-avatar" style="width: 100%;height:100%;">
                        <img class="bili-avatar-img bili-avatar-face bili-avatar-img-radius" v-lazy="item.avatar"/>
                    </div>
                  </nuxt-link></div>
                  <div class="content"><nuxt-link to="javascript:void(0);" class="title">
                      <span class="fans-name">{{item.nickname}}</span>
                      <p title="这个人很懒，什么都写了" class="desc">
                        {{item.sign}}
                      </p>
                   </nuxt-link>
                    <div class="fans-action">
                      <n-button  @click="handleSaveGzData(item,index)" v-if="item.isFocus==0">
                        <n-icon>
                          <Checkmark></Checkmark>
                        </n-icon>
                        <span class="px-1">关注</span>
                      </n-button>
                      <n-button  v-if="item.isFocus==1" type="success">
                        <n-icon>
                          <Checkmark></Checkmark>
                        </n-icon>
                        <span class="px-1">已互关</span>
                      </n-button>
                        <n-button style="margin-left: 10px" type="error" @click="handleCancelData(item,index)">
                          <n-icon>
                            <CloseOutline></CloseOutline>
                          </n-icon>
                          <span class="px-1">移除粉丝</span>
                        </n-button>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="py-[60px] flex justify-center" style="width: 100%" v-if="total==0">
              <k-empty :show="total==0" url="/" desc="暂时没有粉丝" btnmsg="点击前往首页"></k-empty>
            </div>
            <div class="mt-6"  v-if="total > pageSize">
              <n-pagination v-model:page="pageNo"
                            v-model:page-size="pageSize"
                            :display-order="['pages', 'quick-jumper', 'size-picker']"
                            show-quick-jumper
                            show-size-picker
                            :item-count="total"
                            :page-sizes="pageSizesList"
                            :on-update:page="handleLoadPage"
                            :on-update:page-size="handleLoadPageSize"
              />
            </div>
            <k-loading :show="loadingFlag"></k-loading>
          </div>
        </div>
      </div>
    </div>
</template>
<script setup>
const pageNo  = ref(1)
const pageSize  = ref(10)
const status = ref(1)
const isDeleted = ref(1)
const total  = ref(0)
const pages  = ref(0)
const fansList  = ref([])
const loadingFlag = ref(false)
const emits = defineEmits(["success"])
// 分页显示的列表
const pageSizesList = ref([
  {
    label: '15 每页',
    value: 15
  },
  {
    label: '30 每页',
    value: 30
  },
  {
    label: '40 每页',
    value: 45
  }
])

// 加载用户发布的文章
const handleLoadFansUserData = async () => {
  loadingFlag.value =true
  const resp = await useFindUserFocusFansPageApi({
    'pageNo':pageNo.value,
    'pageSize':pageSize.value
  })
  loadingFlag.value =false
  total.value = resp.data.total
  pages.value = resp.data.pages
  fansList.value = resp.data.records
  emits("success",total.value)
}

// 点击分页执行的回调方法
const handleLoadPage = (pno) => {
  pageNo.value = pno
  handleLoadFansUserData()
  document.documentElement.scrollTop =  0
}

// 点击分页size列表的回调方法
const handleLoadPageSize = (psize) => {
  pageNo.value = 1
  pageSize.value = psize
  handleLoadFansUserData()
  document.documentElement.scrollTop =  0
}

// 关注用户
const handleSaveGzData = debounce(async(item)=>{
  try {
    item.isFocus = item.isFocus==1?0:1
    await useSaveCancelUserFocusApi({focusId:item.id})
    useMessage().success(item.isFocus==1?"关注成功":"取消成功")
  }catch (e){
    useMessage().error(e.message)
  }
},500)

// 取消关注
const handleCancelData = debounce(async(item,index)=>{
  try {
    await useDelUserFocusFansApi({id:item.opid,focusId:item.id})
    total.value--
    emits("success",total)
    useMessage().success("移除粉丝成功")
    fansList.value.splice(index,1)
  }catch (e){
    useMessage().error(e.message)
  }
},500)

onMounted(()=>{
  // 加载用户发布的文章
  handleLoadFansUserData()
})
</script>

<style scoped>

.col-full {
  background: #fff;
  border-radius: 4px;
  padding: 20px
}

.section:last-child {
  border-bottom: none;
  margin-bottom: 0
}

.list-item {
  border-bottom: 1px solid #eee;
  display: block;
  padding: 20px 0;
  position: relative;
  line-height: 1
}

.list-item:last-child {
  border-bottom: none
}

.be-input {
  position: relative;
  color: #222;
  font-size: 14px;
  border-radius: 4px
}

.be-input--append .be-input_inner {
  padding: 0 60px 0 5px
}

.be-input_inner {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 50px 0 5px;
  border-radius: 4px;
  border: 1px solid #ccd0d7;
  outline: none;
  box-sizing: border-box;
  transition: all .3s ease
}

.be-input_inner:focus {
  border-color: #00a1d6
}

.be-input-word-counter {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 30px;
  min-width: 40px;
  padding: 0 10px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #99a2aa;
  border-radius: 4px
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 20000
}

.modal-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  margin: 0 auto;
  word-break: break-all;
  line-height: 22px;
  z-index: 1011;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
  border-radius: 4px;
  transition: box-shadow .2s linear
}

.modal-wrapper .modal-header {
  position: relative;
  font: 12px/1.11 Microsoft Yahei, Tahoma, Arial, Helvetica, STHeiti
}

.modal-wrapper .modal-title {
  display: block;
  font-size: 16px;
  line-height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid #ddd
}

.modal-wrapper .modal-header-close {
  position: absolute;
  text-decoration: none;
  top: 13px;
  right: 12px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
  font-size: 16px;
  text-align: center
}

.modal-wrapper .modal-header-close:hover {
  color: #00a1d6
}

.modal-wrapper .modal-body {
  padding: 30px 60px;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  min-width: 9em
}

.modal-wrapper .modal-footer {
  padding: 0 0 30px;
  text-align: center
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1010;
  background-color: rgba(0, 0, 0, .5)
}

.up-cover-components {
  width: 60px;
  height: 60px;
  position: absolute
}

.up-cover-components img {
  width: 60px !important;
  height: 60px !important
}

.btn[data-v-53027a10] {
  display: inline-block;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  padding: 0 10px;
  margin-right: 20px;
  line-height: 30px;
  min-width: 70px;
  transition: all .2s ease;
  font-size: 0;
  color: #666;
  text-align: center;
  vertical-align: middle;
  outline: none;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box
}

.btn[data-v-53027a10]:last-of-type {
  margin-right: 0
}

.btn.default[data-v-53027a10] {
  color: #666;
  background-color: #fff;
  border-color: #d9d9d9
}

.btn.primary[data-v-53027a10] {
  color: #fff;
  background-color: #00a1d6;
  border-color: #00a1d6
}

.btn.primary[data-v-53027a10]:focus, .btn.primary[data-v-53027a10]:hover {
  background-color: #00b5e5;
  color: #fff;
  border-color: #00b5e5
}

.btn[data-v-53027a10]:focus, .btn[data-v-53027a10]:hover {
  color: #00a1d6;
  background-color: #fff;
  border-color: #00a1d6
}

.btn-content[data-v-53027a10] {
  font-size: 12px;
  vertical-align: top
}

.btn-content[data-v-53027a10]:hover {
  color: inherit;
  background-color: inherit
}

.btn-container[data-v-1ea3cefa] {
  font-size: 0;
  white-space: nowrap
}

.btn-container.btn-center[data-v-1ea3cefa] {
  text-align: center
}

.btn-container .btn[data-v-1ea3cefa]:last-of-type {
  margin-right: 0
}

.be-pager {
  margin: 15px 0;
  text-align: center
}

.be-pager:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden
}

.be-pager-item {
  display: inline-block;
  line-height: 38px;
  padding: 0 15px;
  margin-right: 4px;
  text-align: center;
  list-style: none;
  background-color: #fff;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  font-family: Arial;
  font-size: 14px;
  border: 1px solid #d7dde4;
  border-radius: 4px;
  transition: all .2s ease-in-out
}

.be-pager-item a {
  text-decoration: none;
  color: #657180
}

.be-pager-item:hover {
  border-color: #00a1d6
}

.be-pager-item:hover a {
  color: #00a1d6
}

.be-pager-item-active {
  background-color: #00a1d6;
  border-color: #00a1d6
}

.be-pager-item-active:hover a, .be-pager-item-active a {
  color: #fff
}

.be-pager-item-jump-next {
  padding: 0 5px
}

.be-pager-item-jump-next:after {
  content: "\2022\2022\2022";
  display: block;
  letter-spacing: 1px;
  color: #ccc;
  text-align: center
}

.be-pager-prev {
  margin-right: 8px
}

.be-pager-item-jump-next {
  margin-right: 4px
}

.be-pager-next {
  margin-left: 4px
}

.be-pager-item-jump-next, .be-pager-next, .be-pager-prev {
  display: inline-block;
  font-size: 14px;
  line-height: 38px;
  list-style: none;
  text-align: center;
  cursor: pointer;
  color: #666;
  font-family: Arial;
  transition: all .2s ease-in-out
}

.be-pager-next, .be-pager-prev {
  padding: 0 14px;
  border: 1px solid #d7dde4;
  border-radius: 4px;
  background-color: #fff
}

.be-pager-next a, .be-pager-prev a {
  color: #666;
  font-size: 14px
}

.be-pager-next:hover, .be-pager-prev:hover {
  border-color: #00a1d6
}

.be-pager-next:hover a, .be-pager-prev:hover a {
  color: #00a1d6
}

.be-pager-disabled {
  display: none
}

.be-pager-options-elevator {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  color: #99a2aa
}

.be-pager-options-elevator input {
  border-radius: 4px;
  margin: 0 8px;
  width: 50px
}

.be-pager-total {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  margin-left: 30px;
  color: #99a2aa
}

.be-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer
}

.be-dropdown-trigger {
  width: 24px;
  height: 24px;
  margin: auto;
  text-align: center
}

.be-dropdown-trigger .icon-ic_more {
  display: block;
  line-height: 24px;
  color: #222;
  font-size: 24px;
  color: #999
}

.be-dropdown-item {
  height: 40px;
  padding: 0 20px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #222;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color .2s ease;
  cursor: pointer
}

.be-dropdown-item:hover {
  color: #00a1d6;
  background-color: #e5e9ef
}

.be-dropdown-menu {
  position: fixed;
  top: 40px;
  z-index: 10;
  padding: 6px 0;
  background-color: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .14)
}

.col-full {
  background: #fff;
  box-shadow: 0 0 0 1px #eee;
  border-radius: 4px;
  padding: 20px
}

.section {
  border-bottom: 1px solid #eee;
  margin-bottom: 17px;
  position: relative
}

.section:last-child {
  border-bottom: none;
  margin-bottom: 0
}

.list-item {
  border-bottom: 1px solid #eee;
  display: block;
  padding: 20px 0;
  position: relative;
  line-height: 1
}

.list-item:last-child {
  border-bottom: none
}

.be-input {
  position: relative;
  color: #222;
  font-size: 14px;
  border-radius: 4px
}

.be-input--append .be-input_inner {
  padding: 0 60px 0 5px
}

.be-input_inner {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 50px 0 5px;
  border-radius: 4px;
  border: 1px solid #ccd0d7;
  outline: none;
  box-sizing: border-box;
  transition: all .3s ease
}

.be-input_inner:focus {
  border-color: #00a1d6
}

.be-input-word-counter {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 30px;
  min-width: 40px;
  padding: 0 10px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #99a2aa;
  border-radius: 4px
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 20000
}

.modal-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  margin: 0 auto;
  word-break: break-all;
  line-height: 22px;
  z-index: 1011;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
  border-radius: 4px;
  transition: box-shadow .2s linear
}

.modal-wrapper .modal-header {
  position: relative;
  font: 12px/1.11 Microsoft Yahei, Tahoma, Arial, Helvetica, STHeiti
}

.modal-wrapper .modal-title {
  display: block;
  font-size: 16px;
  line-height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid #ddd
}

.modal-wrapper .modal-header-close {
  position: absolute;
  text-decoration: none;
  top: 13px;
  right: 12px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
  font-size: 16px;
  text-align: center
}

.modal-wrapper .modal-header-close:hover {
  color: #00a1d6
}

.modal-wrapper .modal-body {
  padding: 30px 60px;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  min-width: 9em
}

.modal-wrapper .modal-footer {
  padding: 0 0 30px;
  text-align: center
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1010;
  background-color: rgba(0, 0, 0, .5)
}

.up-cover-components {
  width: 60px;
  height: 60px;
  position: absolute
}

.up-cover-components img {
  width: 60px !important;
  height: 60px !important
}

.btn {
  display: inline-block;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  padding: 0 10px;
  margin-right: 20px;
  line-height: 30px;
  min-width: 70px;
  transition: all .2s ease;
  font-size: 0;
  color: #666;
  text-align: center;
  vertical-align: middle;
  outline: none;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box
}

.btn[data-v-53027a10]:last-of-type {
  margin-right: 0
}

.btn.default[data-v-53027a10] {
  color: #666;
  background-color: #fff;
  border-color: #d9d9d9
}

.btn.primary[data-v-53027a10] {
  color: #fff;
  background-color: #00a1d6;
  border-color: #00a1d6
}

.btn.primary[data-v-53027a10]:focus, .btn.primary[data-v-53027a10]:hover {
  background-color: #00b5e5;
  color: #fff;
  border-color: #00b5e5
}

.btn[data-v-53027a10]:focus, .btn[data-v-53027a10]:hover {
  color: #00a1d6;
  background-color: #fff;
  border-color: #00a1d6
}

.btn-content[data-v-53027a10] {
  font-size: 12px;
  vertical-align: top
}

.btn-content[data-v-53027a10]:hover {
  color: inherit;
  background-color: inherit
}

.btn-container[data-v-1ea3cefa] {
  font-size: 0;
  white-space: nowrap
}

.btn-container.btn-center[data-v-1ea3cefa] {
  text-align: center
}

.btn-container .btn[data-v-1ea3cefa]:last-of-type {
  margin-right: 0
}

.be-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer
}

.be-dropdown-trigger {
  width: 24px;
  height: 24px;
  margin: auto;
  text-align: center
}

.be-dropdown-trigger .icon-ic_more {
  display: block;
  line-height: 24px;
  color: #222;
  font-size: 24px;
  color: #999
}

.be-dropdown-item {
  height: 40px;
  padding: 0 20px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #222;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color .2s ease;
  cursor: pointer
}

.be-dropdown-item:hover {
  color: #00a1d6;
  background-color: #e5e9ef
}

.be-dropdown-menu {
  position: fixed;
  top: 40px;
  z-index: 10;
  padding: 6px 0;
  background-color: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .14)
}

#page-follows .col-full {
  padding: 0
}

#page-follows .follow-main {
  position: relative;
  min-height: 600px;
}

#page-follows .follow-main .relation-list {
  padding: 0 20px 20px
}

#page-follows .follow-select {
  width: 24px;
  height: 24px;
  margin-top: 20px;
  float: left;
  cursor: pointer
}

#page-follows .follow-select .icon-follow-watched {
  width: 24px;
  height: 24px;
  background-position: -468px -980px
}

#page-follows .list-item:last-child {
  border-bottom: 1px solid #eee
}

#page-follows .list-item .content {
  padding: 0 200px 0 0;
  position: relative;
  margin-left: 88px;
  margin-top: 10px
}

#page-follows .list-item .title {
  font-size: 16px;
  line-height: 19px
}

#page-follows .list-item .desc {
  color: #6d757a;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  padding-right: 10px
}

#page-follows .modal-container.prohibit-modal .modal-wrapper {
  width: 460px
}

#page-follows .modal-container.blacklist-modal .modal-wrapper {
  width: 340px
}

#page-follows .modal-container.edit-video-modal .modal-wrapper {
  width: 420px
}

#page-follows .modal-container.edit-video-modal .edit-video-title {
  text-align: center
}

#page-follows .modal-container.edit-video-modal .modal-body {
  position: relative;
  padding: 14px 0 0;
  margin-bottom: 18px
}

#page-follows .modal-container.edit-video-modal .modal-body .target-followlist {
  position: relative;
  height: 300px;
  border-bottom: 1px solid #e5e9ef
}

#page-follows .modal-container.edit-video-modal .modal-body .target-followlist-container {
  margin: 0 36px
}

#page-follows .modal-container.edit-video-modal .target-followitem {
  color: #222;
  line-height: 24px;
  margin: 12px 0;
  cursor: pointer
}

#page-follows .modal-container.edit-video-modal .target-followitem:hover {
  color: #00a1d6
}

#page-follows .modal-container.edit-video-modal .follow-select {
  width: 18px;
  height: 18px;
  margin-top: 0
}

#page-follows .modal-container.edit-video-modal .follow-select .icon-follow-watched {
  width: 18px;
  height: 18px;
  background-position: -471px -919px
}

#page-follows .modal-container.edit-video-modal .target-follow-name {
  float: left;
  width: 280px;
  margin-left: 18px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

#page-follows .modal-container.edit-video-modal .target-follow-name .target-follow-notice {
  font-size: 12px;
  color: #999;
  line-height: 15px
}

#page-follows .modal-container.edit-video-modal .btn-content {
  margin: 10px 66px
}

#page-follows .modal-container .content-text {
  color: #222;
  font-size: 14px
}

#page-follows .modal-container .content-tip {
  margin-top: 5px;
  color: #99a2aa;
  font-size: 12px
}

.fans-action {
  position: absolute;
  right: 0;
  top: 9px
}

.fans-action-btn {
  float: left;
  display: block;
  line-height: 22px;
  margin-left: 15px;
  font-size: 0;
  color: #6d757a;
  text-align: center;
  vertical-align: middle;
  cursor: pointer
}

.fans-action-btn:hover {
  color: #00a1d6
}

.fans-action-btn.follow {
  border: 1px solid #ccd0d7;
  border-radius: 4px;
  width: 74px
}

.fans-action-btn.follow:hover {
  border-color: #00a1d6
}

.fans-action-text {
  line-height: 16px;
  font-size: 12px;
}

.up-cover-components img {
  width: 60px!important;
  height: 60px!important;
}

.bili-avatar-img-radius {
  border-radius: 50%;
}

.bili-avatar-img {
  border: none;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}

.cover-container {
  position: absolute;
  width: 60px;
  height: 60px
}
</style>